<template>
  <div @click="deal_content_click">
    <Layout>
      <!--头部 菜单栏-->
      <Menu
        :style="{ position: 'fixed', width: '100%' }"
        style="z-index: 2"
        :mode="menu_place"
        theme="light"
        @on-select="change_index_text"
      >
        <!-- 控制菜单栏图标 -->
        <div v-show="screenWidth < 768 ? true : false">
          <Icon
            v-on:click="Icon_click"
            :class="rotateIcon"
            type="md-menu"
            size="24"
            style="display: inline-block; background-color: #fff; margin: 18px"
          ></Icon>
          <div style="display: inline-block; text-align: center">
            <h2 style="font-weight: normal">{{ index_text }}</h2>
          </div>
        </div>

        <transition :name="transition_name">
          <div v-if="show_Menu">
            <div class="layout-nav">
              <MenuItem name="MaofU" to="/hp">
                <h2>MaofU</h2>
              </MenuItem>
              <MenuItem name="编程内容" to="/pc">
                <Icon type="ios-code" :size="icon_size" />
                编程内容
              </MenuItem>
              <MenuItem name="其他内容" to="/oc">
                <Icon type="ios-paper-outline" :size="icon_size" />
                其他内容
              </MenuItem>
              <MenuItem name="友情链接" to="/lk">
                <Icon type="ios-link-outline" :size="icon_size" />
                友情链接
              </MenuItem>
              <MenuItem name="我的动态" to="/dm">
                <Icon type="ios-bicycle" :size="icon_size" />
                我的动态
              </MenuItem>
              <MenuItem name="核心素养" to="/cl">
                <Icon type="ios-body-outline" :size="icon_size" />
                核心素养
              </MenuItem>
              <MenuItem name="倒数日" to="/cd">
                <Icon type="ios-alarm-outline" :size="icon_size" />
                倒数日
              </MenuItem>
            </div>
          </div>
        </transition>
      </Menu>

      <!-- 内容 -->
      <Content
        :style="{
          margin: '60px 0px 0px',
          background: '#fff',
          minHeight: '700px'
        }"
        style="width: 100%; height: 100%"
      >
        <!-- home中路由占位 -->

        <router-view v-slot="{ Component }">
          <transition name="fade">
            <keep-alive>
              <component :is="Component" />
            </keep-alive>
          </transition>
        </router-view>
      </Content>
    </Layout>
  </div>
</template>

<script>
import eventBus from '@/eventBus/eventBus'
import { break_width } from '@/mylibs/define'
export default {
  name: 'Home',
  data() {
    return {
      index_text: '',
      menu_place: 'horizontal',
      screenWidth: null, //屏幕尺寸
      screenHeight: null,
      show_Menu: true,
      rotateIcon: ['menu-icon', ''],
      icon_size: 20,
      transition_name: ''
    }
  },

  watch: {
    screenWidth: {
      handler: function (val, oldVal) {
        if (val < break_width) {
          this.menu_place = 'vertical'
          this.show_Menu = false
          this.transition_name = 'slide-up'
        } else {
          this.menu_place = 'horizontal'
          this.show_Menu = true
          this.transition_name = ''
        }
      },
      immediate: true
    }
  },

  methods: {
    Icon_click(e) {
      e.stopPropagation()

      this.show_Menu = !this.show_Menu

      this.rotateIcon = ['menu-icon', this.show_Menu ? 'rotate-icon' : '']
    },

    // 判断是不是侧边栏发出的点击信号
    is_click_on_sider(e) {
      try {
        if (e.target.__vnode.props.class.indexOf('ivu-layout-sider') != -1)
          return true
      } catch (e) {}

      var bo = false
      for (let index = 0; index < e.path.length; index++) {
        const element = e.path[index]

        try {
          if (element.__vnode.props.class.indexOf('ivu-layout-sider') != -1) {
            bo = true
            break
          }
        } catch (e) {}
      }

      return bo
    },

    deal_content_click(e) {
      // 打包后,不能判断是否是,侧边栏发出的
      // if (!this.is_click_on_sider(e)) {
      //   eventBus.emit('home_content_clik')
      // }

      if (this.screenWidth < break_width) {
        this.show_Menu = false
      }
    },

    // 屏幕变化
    get_scree_w_h() {
      this.screenWidth = document.body.clientWidth
      this.screenHeight = document.body.clientHeight
      window.onresize = () => {
        //屏幕尺寸变化就重新赋值
        return (() => {
          this.screenWidth = document.body.clientWidth
          this.screenHeight = document.body.clientHeight
        })()
      }

      eventBus.emit('ev_screen_width_height', {
        w: this.screenWidth,
        h: this.screenHeight
      })
    },

    // 定时器
    timer(fun_back) {
      if (fun_back)
        window.setInterval(() => {
          fun_back()
        }, 500)
    },

    change_index_text(name) {
      this.index_text = name
    }
  },

  created() {
    this.timer(this.get_scree_w_h)
  },

  // 组件激活
  activated() {
    console.log('Home 组件激活')
  }
}
</script>

<style>
.rotate-icon {
  transform: rotate(-90deg);
}
</style>
